<!DOCTYPE html>
<html>
	<head>
		<title>商品信息</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#all{
				width: 1200px;
			}
			#x{
				float: left;
				margin-top: 6px;
			}
			.a{
				width: 964px;	
				float: left;			
			}
			.b{
				width: 227px;
				height: 300px;
				border: 1px solid #000;
				margin: 6px 6px;
				float: left;
			}
			.b img{
				display: block;
				margin: 55px auto 35px;
			}
			.c{
				text-align: center;
				
			}
			.d{
				text-decoration: line-through;
			}
			.e{
				display: none;
			}
			.c:hover .e{
				display: block;
				line-height: 76px;
				text-align: center;
				background: #ff6700;
				color: #fff;
			}
			.e{
				position: relative;
				bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div id="all">
			<div id="x">
				<img src="images/mi.png" alt="净化器"/>
			</div>
			<div class="a">
				<div class="b">
					<img src="images/m1.png" alt="小米电视3"/>
					<div class="c">
						小米电视3<br/>
						999元 
						<span class="d">1199元</span>
						<div class="e">小米电视促销</div>
					</div>
				</div>
				<div class="b">
					<img src="images/m2.png" alt="小米电视5"/>
					<div class="c">
						小米电视5<br/>
						1099元
						<span class="d">1399元</span>
						<div class="e">小米电视促销</div>
					</div>
				</div>
				<div class="b">
					<img src="images/m3.png" alt="小米电脑"/>
					<div class="c">
						小米电脑<br/>
						4999元
						<span class="d">5199元</span>
						<div class="e">小米电脑促销</div>
					</div>
				</div>
				<div class="b">
					<img src="images/mi4.png" alt="小米电脑"/>
					<div class="c">
						小米电脑<br/>
						5999元
						<span class="d">6199元</span>
						<div class="e">小米电脑促销</div>
					</div>
				</div>
			</div>
			<div class="a">
				<div class="b">
					<img src="images/m1.png" alt="小米电视3"/>
					<div class="c">
						小米电视3<br/>
						999元 
						<span class="d">1199元</span>
						<div class="e">小米电视促销</div>
					</div>
				</div>
				<div class="b">
					<img src="images/m2.png" alt="小米电视5"/>
					<div class="c">
						小米电视5<br/>
						1099元
						<span class="d">1399元</span>
						<div class="e">小米电视促销</div>
					</div>
				</div>
				<div class="b">
					<img src="images/m3.png" alt="小米电脑"/>
					<div class="c">
						小米电脑<br/>
						4999元
						<span class="d">5199元</span>
						<div class="e">小米电脑促销</div>
					</div>
				</div>
				<div class="b">
					<img src="images/mi4.png" alt="小米电脑"/>
					<div class="c">
						小米电脑<br/>
						5999元
						<span class="d">6199元</span>
						<div class="e">小米电脑促销</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>